<template>
  <div id="Home">
    <van-nav-bar title="购物车" left-text="返回" left-arrow @click-left="$router.go(-1)" />
    
    <div v-for="(item,i) in goodsList" :key="i" class="shop">
      <van-checkbox class="inp" v-model="item.checked" />

      <van-card
        :num="item.nums"
        :price="item.price"
        :title="item.name"
        :thumb="item.img"
          class="inp_a"
      >>
        <!-- <template #tags>
        <van-tag plain type="danger">标签</van-tag>
        <van-tag plain type="danger">标签</van-tag>
        </template> -->
        <template #footer>
          <van-button size="mini">按钮</van-button>
          <van-button size="mini">按钮</van-button>
        </template>
      </van-card>
    </div>
    <van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="this.$store.state.checked">全选</van-checkbox>
    </van-submit-bar>
    <!-- 底部导航 -->
    <tabbar />
  </div>
</template>

<script>
import tabbar from "@/components/Share/Tabbar";
export default {
  name: "",
  components: { tabbar },
  data() {
    return {
      goodsList: []
    };
  },
  methods: {
    onSubmit() {}
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.goodsList = this.$store.state.CartList;
    console.log(this.$store.state.CartList);
  }
};
</script>
<style scoped lang="scss">
/* @import url(); 引入css类 */
.shop{
  display:flex;
  .inp{
    width: 15%;
    padding-left: 5%;
    box-sizing: border-box;
  }
  .inp_a{
    flex: 1
  }
}
</style>